<!doctype html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/common.css" />
		<script type="text/javascript">
			mui.init()
			if (location.pathname != "/h5/html/login.html" && typeof(sessionStorage.token) == "undefined") {

				mui.openWindow({
					url: 'login.html',

				});
			}
		</script>
		<style>
			.card {
				width: 7.5rem;
				height: 2.1rem;
				padding-bottom: 2.4rem;
				background: white;
			}
			
			.card img {
				width: 1rem;
				height: 1rem;
				margin: 0.5rem 0.2rem;
				float: left;
			}
			
			.card ul {
				float: left;
			}
			
			.bank_name {
				clear: both;
				margin-top: 0.51rem;
				font-size: 0.32rem;
				color: #323232;
			}
			
			.card_type {
				font-size: 0.28rem;
				color: #646464;
				margin-bottom: 0.22rem;
			}
			
			.card_number {
				font-size: 0.36rem;
				color: #323232;
			}
			
			.addbank {
				width: 100%;
				height: 100%;
				font-size: 0.5rem;
			}
			
			.none {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="mui_con">
			<div class="card none">
				<img class="bank_logo" />
				<ul>
					<li class="bank_name"></li>
					<li class="card_type"></li>
					<li class="card_number"><span></span></li>
				</ul>
			</div>
			
		</div>
		<nav class="mui-bar mui-bar-tab">
			<button type="button" class="mui-btn mui-btn-danger addbank">添加银行卡</button>
		</nav>
	
	</body>

</html>
<script>
	document.querySelector(".addbank").addEventListener("tap", function() {
		mui.openWindow({
			url: "addbank.html",
		});
	});

	mui.ajax('/api/v1/bank/myCardList', {
		data: {
			paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "'}"
		},
		dataType: 'json',
		type: 'post',
		timeout: 10000,

		success: function(data) {
			var obj = eval('(' + data.data + ')');
			var i;
			if (data.code == 200) {
				for (i in obj.myCardList) {
					var card = document.querySelector(".card").cloneNode(true);
					var mui_con=document.getElementById("mui_con");
					mui_con.appendChild(card);
					card.className = 'card';
					card.id=obj.myCardList[i].id;
					document.getElementById(obj.myCardList[i].id).querySelector("span").innerHTML=obj.myCardList[i].bank_card;
					document.getElementById(obj.myCardList[i].id).querySelector("img").src=obj.myCardList[i].img;
					document.getElementById(obj.myCardList[i].id).querySelector(".bank_name").innerHTML=obj.myCardList[i].bank_name;
				}
			}
		
		},
		error: function(xhr, type, errorThrown) {
			//异常处理；
			mui.toast("未知错误4")
		}
	});
</script>